﻿﻿﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登陆</title>
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/css.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.1.1.min.js"></script>

    <!--自定义工具-->
    <script src="js/HttpUtil.js"></script>
    <!--参数校验工具-->
    <script src="validation-1.19.2/jquery.validate.min.js"></script>
    <script src="validation-1.19.2/localization/messages_zh.min.js"></script>
<style>
.tab {
	overflow: hidden;
	margin-top: 20px; margin-bottom:-1px;
}
.tab li {
	display: block;
	float: left;
	width: 100px;padding:10px 20px; cursor:pointer; border:1px solid #ccc; 
}
.tab li.on {
	background: #90B831; color:#FFF;padding:10px 20px;
}
.conlist {padding:30px; border:1px solid #ccc; width:300px;}
.conbox {
	display: none;
}
</style>
<script>
$(function(){
	$(".tab li").each(function(i){
		$(this).click(function(){
		$(this).addClass("on").siblings().removeClass("on");
		$(".conlist .conbox").eq(i).show().siblings().hide();
		})
	})
})
</script>
</head>

<body>
<div class="login-top">
    <div class="wrapper">
        <div class="fl font30">LOGO</div>
        <div class="fr">您好，欢迎为生活充电在线！</div>
    </div>
</div>
<div class="l_main">
    <div class="l_bttitle2"> 
        <!-- <h2>登录</h2>-->
        <h2><a href="index.html">< 返回首页</a></h2>
    </div>
    <div class="loginbox fl" style="position: relative;top: -25px">
        <div class="tab">
            <ul>
                <li class="on">我是买家</li>
                <li>我是卖家</li>
            </ul>
        </div>

            <div class="conlist">
                <div class="conbox" style="display:block;">
                    <form id="login_submit">
                        <p>
                            <input type="text" class="loginusername" name="userName" id="userName">
                        </p>
                        <p>
                            <input type="password" class="loginuserpassword" name="password" id="password">
                        </p>
                        <p><span class="fl fntz14 margin-t10"><a href="register.html" style="color:#ff6000">立即注册</a></span><span class="fr fntz12 margin-t10"><a href="#">忘记密码？</a></span></p>
                        <p>
                            <input type="button" class="loginbtn" value="登  录" onclick="formSubmit()">
                        </p>
                    </form>
                </div>
                <div class="conbox">
                    <form id="login_submit2">
                        <p>
                            <input type="text" class="loginusername" name="userName" id="userName2">
                        </p>
                        <p>
                            <input type="password" class="loginuserpassword" name="password" id="password2">
                        </p>
                        <p><span class="fl fntz14 margin-t10"><a href="register.html" style="color:#ff6000">立即注册</a></span><span class="fr fntz12 margin-t10"><a href="#">忘记密码？</a></span></p>
                        <p>
                            <input type="button" class="loginbtn" value="登  录" onclick="formSubmit2()">
                        </p>
                    </form>
                </div>
            </div>
    </div>
    
    <div class="fr margin-r100 margin-t45"><img src="images/login-pic.jpg" width="507" height="325"></div>
</div>
</body>
</html>

<script>
    $(function () {
        init();
    });
    function init() {
        //加载参数校验工具
        $("#login_submit").validate(
            {
                rules: {
                    userName: {required: true},
                    password: {required: true}
                },
                messages: {
                    userName: {
                        required: "小哥哥，这个是必填哦！",
                    }
                }
            }
        );
        $("#login_submit2").validate(
            {
                rules: {
                    userName: {required: true},
                    password: {required: true}
                },
                messages: {
                    userName: {
                        required: "小哥哥，这个是必填哦！",
                    }
                }
            }
        );
    }

    function formSubmit() {
        //获取验证框架结果
        let validateResult = $("#login_submit").valid();
        if (validateResult) {
            //获取表单数据
            let userNameValue = $("#userName").val();
            let passwordValue = $("#password").val();

            //发起http 请求
            let url = "/login";
            let params = {userName: userNameValue, password: passwordValue, type: "0"};
            postWithParams(url, params, function (data) {
                //添加cookie一天内下次自动登录
                var json = JSON.stringify(data);
                SetCookie("userMassage",json,24*60);//设置一天有效
                 location.href="index.html";
                //拼接成html
            })
        }else {
            //校验不通过
            return;
        }
    }

    function formSubmit2() {
        let validateResult2 = $("#login_submit2").valid();
        if (validateResult2){
            //获取表单数据
            let userNameValue = $("#userName2").val();
            let passwordValue = $("#password2").val();

            //发起http 请求
            let url = "/login";
            let params = {userName: userNameValue, password: passwordValue, type: "1"};
            postWithParams(url, params, function (data) {//登录成功
                /*console.log("formSubmit data:");
                console.log(data);*/
                if (data.userStatus==9){
                    location.href=appendHost("customer/index")
                }else {
                    //添加cookie一天内下次自动登录
                    var json = JSON.stringify(data);
                    SetCookie("busMassage",json,24*60)//设置一天有效
                    location.href="店铺专区.html";
                }
                //拼接成html
            })
        }else {
            //校验不通过
            return;
        }
    }

</script>